<template>
  <div style="margin-left: 5px;">
    <div>
      <div>
        <h3 style="display:inline-block">{{Data.CodeNum}}.</h3>
        <span v-html="Data.Title" style="display:inline-block"></span>
        <el-input-number
          style="margin-left:10px"
          size="mini"
          v-if="Data.TitleBlank"
          @change="checkItem()"
          :controls="false"
          v-model="Data.BlankValue"
        ></el-input-number>
        <el-button @click="divvisibility(2)" type="text" style="float:right" v-if="!preview">{{see}}</el-button>
      </div>

      <div v-if="visible">
        <!-- 选项横置 -->
        <div class="option-area" style="margin: 5px;" v-if="!lixian" v-show="!show">
          <el-table :data="Data.RowTitles" style="width: 100%">
            <el-table-column fixed type="index" width="100" :index="GetRowTitleByIndex"></el-table-column>
            <el-table-column v-for="opt in Data.Options" :label="opt.itemName" :key="opt.itemName">
              <template slot-scope="scope">
                <el-radio
                  v-model="scope.row.RadioSelValue"
                  :name="scope.row.Title"
                  :label="opt.itemName"
                >
                  <span/>
                  <el-input
                    style="width:100px"
                    v-model="opt.BlankValues[scope.row.Index]"
                    v-if="opt.canFillBlank&&(scope.row.RadioSelValue==opt.itemName)"
                    size="mini"
                  />
                </el-radio>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 选项竖置 -->

        <div class="option-area" style="margin: 5px;" v-if="!lixian" v-show="show">
          <el-table :data="Data.Options" style="width: 100%">
            <el-table-column fixed type="index" width="100" :index="getitemName"></el-table-column>
            <el-table-column v-for="rt in Data.RowTitles" :label="rt.Title" :key="rt.Title">
              <template slot-scope="scope">
                <el-radio v-model="scope.row.SelValue" :name="scope.row.Title" :label="rt.Title">
                  <span/>
                  <el-input
                    style="width:100px"
                    v-model="rt.CheckBlack[scope.row.Index]"
                    v-if="scope.row.canFillBlank&&(scope.row.SelValue==rt.Title)"
                    size="mini"
                  />
                </el-radio>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 离线表格模式-->
        <div v-if="lixian">
          <table border="1px" cellspacing="0" style="width: 50%">
            <tr>
              选项
              <td v-for="opt in Data.RowTitles" :key="opt.Title">{{opt.Title}}</td>
            </tr>
            <tr v-for="(opt,index) in Data.Options" :key="opt.itemName">
              <td>{{opt.itemName}}</td>
              <td v-for="(item) in Data.RowTitles" :key="item.Title">
                {{index+1}}
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>

    <div id="editor" v-if="canEdit==true" style="margin: 5px;">
      <el-card class="box-card" style="margin-top:20px">
        <EditorComponent v-model="Data.Title" :Html="Data.Title"/>
        <el-row>
          <el-col :span="8">
            <el-card>
              <div style="padding: 14px;">
                <tr>
                  <td>
                    <span>行标题</span>
                  </td>
                </tr>
                <div>
                  <el-input
                    type="textarea"
                    @input="UpdateRowTitle"
                    v-model="Data.RowTitleText"
                    :rows="10"
                    placeholder="请输入内容"
                  ></el-input>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="16">
            <el-card style="margin-left:10px">
              <el-table :fit="true" :data="Data.Options" style="width: 100%">
                <el-table-column label="选项文字">
                  <template slot-scope="scope">
                    <div id="title-row">
                      <el-input
                        size="small"
                        style="display: inline-block;"
                        v-model="scope.row.itemName"
                        placeholder="请输入内容"
                      ></el-input>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column label="允许填空">
                  <template slot-scope="scope">
                    <el-checkbox v-model="scope.row.canFillBlank"></el-checkbox>
                  </template>
                </el-table-column>

                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <div style="display: inline-block;margin-top: 5px;">
                      <el-button
                        type="warning"
                        @click="remove(scope.row.itemId)"
                        size="mini"
                        style="display: inline-block;"
                        icon="el-icon-minus"
                        circle
                      ></el-button>
                      <el-button
                        type="danger"
                        @click="insert(scope.row.itemId)"
                        size="mini"
                        style="display: inline-block;"
                        icon="el-icon-plus"
                        circle
                      ></el-button>
                      <el-button
                        size="mini"
                        style="display: inline-block;"
                        @click="moveUp(scope.row.itemId)"
                        icon="el-icon-top"
                        circle
                      ></el-button>
                      <el-button
                        size="mini"
                        style="display: inline-block;"
                        @click="moveDown(scope.row.itemId)"
                        icon="el-icon-bottom"
                        circle
                      ></el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <BatchAddComponent v-model="msg" @getitem="itemNameArry" :itemnamearry="itemname"></BatchAddComponent>
            </el-card>
          </el-col>
        </el-row>

        <el-button @click="chang" type="text">行列转置</el-button>
        <el-button type="text" @click="lixian=!lixian">离线模式</el-button>
        <el-button type="warning " style="margin-top:5px;width:100%" @click="canEdit=false">完成编辑</el-button>
      </el-card>
    </div>
  </div>
</template>

<script lang='ts'>
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
import TBaseQuestion from "./ts/TBaseQuestion";
import MatrixRadioSubject, {
  MatrixRadioOption
} from "./ts/MatrixRadioSelSubject";
import { QuestionDataTypes, QuestionTypes } from "./ts/QuestionDataTypes";
import DataTypeSelector from "./DataTypeSelector.vue";

import BatchAddComponent from "./BatchAddComponent.vue";
import EditorComponent from "./EditorComponent.vue";
import OrderBy, { OrderByTypes } from "./ts/OrderByTypes";
import OrderByComponent from "./OderByComponent.vue";
import MatrixRowTitle from "./ts/MatrixRowTitle";
import IndexObj from "./ts/IndexObj";
import ImageBase64Componet from "./ImageBase64Componet.vue";
@Component({
  components: {
    EditorComponent,
    DataTypeSelector,
    OrderByComponent,
    BatchAddComponent,
    ImageBase64Componet
  }
})
//矩阵单选组件
export default class TrueFalseMatrixRadioSelComponent extends TBaseQuestion<
  MatrixRadioOption,
  MatrixRadioSubject
> {
  $name: string = "TrueFalseMatrixRadioSelComponent";
  canEdit = true;

  lixian = false;
  show = true;

  itemname = "";
  check: string[] = [];
  msg = "";
  gotMsg: string[] = [];
  options: MatrixRadioOption[] = [];

  @Watch("Data.RowTitles")
  watchData(newVal: Array<MatrixRowTitle>, oldVal: Array<MatrixRowTitle>) {
    console.log("RowTitle Changed:" + newVal);
    if (newVal == null) return;
    this.Data.RowTitleText = this.ConvertTitleArrayToStr(newVal);
  }

  @Watch("msg")
  getstr() {
    console.log(this.msg);
    this.gotMsg = this.msg.split("\n");
    this.gotMsg.forEach(element => {
      if (element != " ") {
        var opt = new MatrixRadioOption();
        opt.itemName = element;
        this.options.push(opt);
      }
    });
    this.Data.Options = this.options;
    this.options = [];
  }
  itemNameArry() {
    this.itemname = this.getOptionText();
  }

  //获取options中每一项的name
  getOptionText(): string {
    let options = this.Data.Options[0].itemName + "\n";
    let n = this.Data.Options.length;
    for (let i = 1; i < n; i++) {
      if (i < n - 1) {
        options += this.Data.Options[i].itemName + "\n";
      } else {
        options += this.Data.Options[i].itemName;
      }
    }
    return options;
  }
  constructor() {
    super(MatrixRadioOption, MatrixRadioSubject);

    this.Data.DataType = QuestionDataTypes.dtText;
    this.Data.QuestionType = QuestionTypes.qtMatrixRadio;
    this.Data.Title = "矩阵单选标题";

    for (var i: number = 0; i < 3; i++) {
      this.Data.RowTitles.push(new MatrixRowTitle(i, "标题" + (i + 1)));
    }

    this.Data.RowTitleText = this.ConvertTitleArrayToStr(this.Data.RowTitles);

    for (var i: number = 0; i < 5; ++i) {
      var opt = new MatrixRadioOption();
      opt.itemName = "选项" + i;
      for (var j: number = 0; j < this.Data.RowTitles.length; j++) {
        opt.BlankValues.push("");
      }
      this.Data.Options.push(opt);
    }
  }
  mounted() {
    super.mounted();
    this.initProps();

    console.info("component mounted!");
  }
  //输入框内容改变
  inputchange() {
    this.msg = this.getOptionText();
  }
  //删除选项
  remove(str: string): void {
    super.remove(str);
    this.msg = this.getOptionText();
  }
  //插入选项
  insert(id: string): void {
    let options = this.Data.Options;
    options.splice(
      options.findIndex(item => item.itemId === id) + 1,
      0,
      this.createNewOption(MatrixRadioOption)
    );
    this.SetBlankValues();
    this.msg = this.getOptionText();
  }
  //向上移动选项
  moveUp(id: string): void {
    super.moveUp(id);
    this.msg = this.getOptionText();
  }
  moveDown(id: string) {
    super.moveDown(id);
    this.msg = this.getOptionText();
  }
  //数组转为字符串
  ConvertTitleArrayToStr(arry: Array<MatrixRowTitle>): string {
    var tempArray: Array<string> = [];
    for (var t of arry) {
      tempArray.push(t.Title);
    }

    return tempArray.join("\n");
  }

  GetRowTitles(): string {
    return this.ConvertTitleArrayToStr(this.Data.RowTitles);
  }

  //设置填空数组的长度
  SetBlankValues(): void {
    for (var opt of this.Data.Options) {
      opt.BlankValues = [];

      for (var i = 0; i < this.Data.RowTitles.length; ++i) {
        opt.BlankValues.push("");
      }
    }
  }
  getQuestionData(): any {
    return this.Data;
  }

  setQuestionData(data: string) {}

  getTitle(): void {
    // console.info(Data.Title);
    // this.Data.Title;
  }

  setTitle(txt: string): void {
    console.info(txt);
  }

  GetHtml(html: string): void {
    this.Data.Title = html;
  }

  UpdateRowTitle(): void {
    var tempArray = this.Data.RowTitleText.split("\n");
    this.Data.RowTitles = [];
    var index: number = 0;
    for (var t of tempArray) {
      this.Data.RowTitles.push(new MatrixRowTitle(index, t));
      index++;
    }
    this.SetBlankValues();
  }

  GetRowTitleByIndex(index: number): string {
    return this.Data.RowTitles[index].Title;
  }

  getitem(num: string): void {
    console.log(num);
  }

  GetoptionByIndex(index: number) {
    return this.Data.Options[index].itemName;
  }
  chang() {
    for (let i = 0; i < this.Data.Options.length; i++) {
      this.check[i] = this.Data.Options[i].itemId;
    }
    this.show = !this.show;
  }
  getitemName(index: number) {
    return this.Data.Options[index].itemName;
  }
}
</script>
 
<style>
.optionLayout {
  display: flex;
  display: -webkit-flex;
  border: 1px solid gainsboro;
  flex-flow: row wrap;
  width: 100%;
  align-items: center;
  justify-content: left;
}
.setting-table td {
  text-align: center;
  vertical-align: middle;
}
table {
  width: 100%;
  font-size: 14px;
  margin-top: 5px;
}
</style>
